<template>
	<movable-area
		:style="{
			width: clientWidth + 'px',
			height: clientHeight + 'px',
			left: windowWidth / 2 - clientWidth / 2 + 'px'
		}"
		:scale-area="true"
	>
		<movable-view
			:scale="true"
			:out-of-bounds="true"
			id="rootTree"
			direction="all"
			scale-min="0.8"
			:style="{
				width: 2 * clientWidth + 'px',
				height: 2 * clientHeight + 'px'
			}"
			class="display_flex"
			:x="-clientWidth / 2"
			:y="-clientHeight / 2"
		>
			<treeChart :dataSource="familyData" isRoot="true" @clickFamily="clickFamily" />
		</movable-view>
	</movable-area>
</template>

<script setup>
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, nextTick, watchEffect, onUpdated } from 'vue';
import treeChart from './treeChart.vue';
import mapData from '../mapData.js';
import _ from 'lodash';

const props = defineProps({
	familyData: {
		type: Object,
		default: {},
		required: true
	}
});
const familyData = ref();
const genderNum = reactive([]);
const deep = ref(); //树深度
const leftIndexArr = reactive([]);
const scaleNum = ref(1);
const windowWidth = window?.innerWidth || uni.getSystemInfoSync().windowWidth;
const windowHeight = window?.innerHeight || uni.getSystemInfoSync().windowHeight;
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().windowWidth;
const clientHeight = document?.body.clientHeight || uni.getSystemInfoSync().windowHeight;

// const familyData = ref(mapData.webMap);  //demo数据

const emits = defineEmits(['clickFamily']);

const clickFamily = (data) => {
	emits('clickFamily', data);
};

/**
 * 获取每层男女人数
 */
const caculateGenderNum = (tree) => {
	if (genderNum.length < tree.layer) {
		genderNum.push({ female: 0, male: 0 });
	}
	if (tree.gender == 1) {
		genderNum[tree.layer - 1].male++;
	} else {
		genderNum[tree.layer - 1].female++;
	}

	if (tree.partner) {
		tree.partner.forEach((item) => {
			if (item.gender == 1) {
				genderNum[tree.layer - 1].male++;
			} else {
				genderNum[tree.layer - 1].female++;
			}
		});
	}

	if (tree.children) {
		tree.children.forEach((item) => {
			caculateGenderNum(item);
		});
	}
};

/**
 * 获取最左侧亲人，并插入left：1，和男女人数，方便显示左侧信息
 */
const getLeft = (tree) => {
	if (leftIndexArr.length < tree.layer) {
		leftIndexArr.push(true);
		tree.left = 1;
		tree.genderNum = genderNum[tree.layer - 1];
	}
	if (tree.children) {
		tree.children.forEach((item) => {
			getLeft(item);
		});
	}
};

// 获取树的广度
const handleGetTreeExtent = (node) => {
	let extend = 0;
	node.children?.forEach((item) => {
		if (item.children) {
			extend += handleGetTreeExtent(item);
		} else {
			if (item.partner) {
				extend += 2;
			} else {
				extend += 1;
			}
		}
	});
	return extend;
};

// 获取树的深度
const handleGetTreeDeep = (tree) => {
	let deep = 0;
	tree.children?.forEach((item) => {
		if (item.children) {
			deep = Math.max(deep, handleGetTreeDeep(item) + 1);
		} else {
			deep = Math.max(deep, 1);
		}
	});
	return deep;
};

watchEffect(() => {
	familyData.value = props.familyData.name
		? props.familyData
		: {
				name: '添加成员',
				isNull: 1
		  };
	deep.value = handleGetTreeDeep(props.familyData) + 1;

	genderNum.length = 0; //每次更新都初始化
	caculateGenderNum(_.cloneDeep(familyData.value));
	leftIndexArr.length = 0; //每次更新都初始化
	getLeft(familyData.value);
});
</script>

<style lang="scss"></style>
